<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="110px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="6">
					<el-form-item label="设备名称" prop="sbmc" required >
						<el-input v-model="dataForm.sbmc" placeholder="请输入设备名称" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="设备位号" prop="sbwh" required >
						<el-input v-model="dataForm.sbwh" placeholder="请输入设备位号" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="设备种类" prop="sblb" required >
						<el-select v-model="dataForm.sblb" placeholder="请选择设备种类" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sblbOptions" :key="index" :label="item.NAME" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="设备类型" prop="sblx" required >
						<el-select filterable v-model="dataForm.sblx" placeholder="请选择设备类型" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sblxOptions" :key="index" :label="item.NAME" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="所属部门" prop="ssbm" required >
						<dep-select filterable v-model="dataForm.ssbm" placeholder="请选择所属部门" >
						</dep-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="区域位置" prop="azwz" required >
						<el-select v-model="dataForm.azwz" placeholder="请选择区域位置" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in azwzOptions" :key="index" :label="item.MC" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="关键性分类" prop="gjxfl" required >
						<el-input v-model="dataForm.gjxfl" placeholder="请输入关键性分类" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="生产日期" prop="scrq" required >
						<el-date-picker v-model="dataForm.scrq" placeholder="请选择生产日期" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="安装日期" prop="azrq" required >
						<el-date-picker v-model="dataForm.azrq" placeholder="请选择安装日期" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="投用日期" prop="tyrq" required >
						<el-date-picker v-model="dataForm.tyrq" placeholder="请选择投用日期" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="使用年限" prop="synx" required >
						<el-input v-model="dataForm.synx" placeholder="请输入使用年限" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="固定资产编号" prop="gdzcbh" required >
						<el-input v-model="dataForm.gdzcbh" placeholder="请输入固定资产编号" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="设备重量" prop="sbzl" required >
						<el-input v-model="dataForm.sbzl" placeholder="请输入设备重量" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="生产厂家" prop="sccj" required >
						<el-input v-model="dataForm.sccj" placeholder="请输入生产厂家" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="安装单位" prop="andw" required >
						<el-input v-model="dataForm.andw" placeholder="请输入安装单位" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="规格型号" prop="ggxh" required >
						<el-input v-model="dataForm.ggxh" placeholder="请输入规格型号" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="出厂序号" prop="ccxh" required >
						<el-input v-model="dataForm.ccxh" placeholder="请输入出厂序号" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="设备特性" prop="sbtx" required >
						<el-input v-model="dataForm.sbtx" placeholder="请输入设备特性" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="工段" prop="gd" required >
						<el-input v-model="dataForm.gd" placeholder="请输入工段" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="登记人" prop="djr" required >
						<el-input v-model="dataForm.djr" placeholder="请输入登记人" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="登记部门" prop="djbm" required >
						<el-input v-model="dataForm.djbm" placeholder="请输入登记部门" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="登记日期" prop="djrq" required >
						<el-date-picker v-model="dataForm.djrq" placeholder="请选择登记日期" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="设备状态" prop="sbzt" required >
						<el-select v-model="dataForm.sbzt" placeholder="请选择设备状态" clearable disabled :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sbztOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否特种设备" prop="tzsb" required  >
						<el-radio-group v-model="dataForm.tzsb" :style='{}' >
							<el-radio v-for="(item, index) in tzsbOptions" :key="index" :label="item.id"  @click=show()>{{item.fullName}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>

       
	
        

<el-col :span="24" v-show="isshow">
    <el-row :gutter="15">
	    <el-col :span="24">
	       <el-form-item label-width="0">
               <div class="JNPF-common-title">
                    <h2>设备检验记录</h2>
                </div>
	            <el-table :data="dataForm.inspectionrecord" size='mini'>
	                 <el-table-column type="index" width="50" label="序号" align="center" />
                     <el-table-column prop="company" label="检查单位">
                        <template slot-scope="scope">
				             <el-input v-model="scope.row.company" placeholder="" clearable :style='{"width":"100%"}'></el-input>
                         </template>
                     </el-table-column>
                     <el-table-column prop="person" label="检验人员">
                          <template slot-scope="scope">
				              <el-input v-model="scope.row.person" placeholder="" clearable :style='{"width":"100%"}'></el-input>
                          </template>
                     </el-table-column>
                     <el-table-column prop="result" label="检验结果">
                         <template slot-scope="scope">
				             <el-input v-model="scope.row.result" placeholder="" clearable :style='{"width":"100%"}'></el-input>
                          </template>
                     </el-table-column>
                     <el-table-column prop="validity" label="检验有效期至">
                         <template slot-scope="scope">
				             <el-date-picker v-model="scope.row.validity" placeholder="" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" ></el-date-picker>
                         </template>
                     </el-table-column>
                     <el-table-column prop="reminder" label="复检提醒时间">
                         <template slot-scope="scope">
				              <el-date-picker v-model="scope.row.reminder" placeholder="" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" ></el-date-picker>
                         </template>
                     </el-table-column>
                     <el-table-column label="操作" width="50">
                          <template slot-scope="scope">
                               <el-button size="mini" type="text" class="JNPF-table-delBtn" @click="handleDelinspectionrecordEntityList(scope.$index)">删除</el-button></template>
                          </el-table-column>
	            </el-table>
                <div class="table-actions" @click="addHandleinspectionrecordEntityList()">
                     <el-button type="text" icon="el-icon-plus">新增</el-button>
                </div>
	        </el-form-item>
	    </el-col>
	</el-row>
</el-col>


<h4 class="my_title">设备检测</h4>
         <template>
             <el-table :data="dataForm.haulmain">
              <el-table-column type="index" width="50" label="序号" align="center" />
              <el-table-column prop="type" label="名称" />
              <el-table-column prop="flag2" label="检修/维护" />

			  <el-table-column label="周期"  prop="cycle" />
			  <el-table-column label="措施"  prop="measures" />
			  <el-table-column label="内容"  prop="haulmain_content" />
                          
              <el-table-column label="操作" width="50" >
                <template slot-scope="scope">
                  <el-button size="mini" type="text" class="JNPF-table-delBtn"
                    @click="handleDel(scope.$index,scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-actions" @click="choice" >
              <el-button type="text" icon="el-icon-plus">新增</el-button>
            </div>

		 </template>
            

        
		<h4 class="my_title">设备维护</h4>
         <template>
             <el-table :data="dataForm.whmain">
              <el-table-column type="index" width="50" label="序号" align="center" />
              <el-table-column prop="type" label="名称" />
              <el-table-column prop="flag2" label="检修/维护" />

			  <el-table-column label="周期"  prop="cycle" />
			  <el-table-column label="措施"  prop="measures" />
			  <el-table-column label="内容"  prop="haulmain_content" />
                          
              <el-table-column label="操作" width="50" >
                <template slot-scope="scope">
                  <el-button size="mini" type="text" class="JNPF-table-delBtn"
                    @click="handleDel_w(scope.$index,scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-actions" @click="choice_w" >
              <el-button type="text" icon="el-icon-plus">新增</el-button>
            </div>

		 </template>




   <GoodsBox v-if="goodsBoxVisible" ref="goodsBox" @refreshDataList="initList" />

   <List v-if="ssVisible" ref="List" @refreshDataList_w="initList_w" />




</el-form>

</el-row>

</div>



	</transition>

        
</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
import GoodsBox from './Defend'
import List from './list'
export default {
	components: { GoodsBox,List},
    data() {
      return {
        visible: false,
        isDetail: false,
		goodsBoxVisible: false,
		activeName: 'goods',
		ssVisible: false,
		isshow:true,
        dataForm: {
					sbmc:undefined,
					sbwh:undefined,
					sblb:undefined,
					sblx:undefined,
					ssbm:undefined,
					azwz:undefined,
					gjxfl:undefined,
					scrq:undefined,
					azrq:undefined,
					tyrq:undefined,
					synx:undefined,
					gdzcbh:undefined,
					sbzl:undefined,
					sccj:undefined,
					andw:undefined,
					ggxh:undefined,
					ccxh:undefined,
					sbtx:undefined,
					gd:undefined,
					djr:undefined,
					djbm:undefined,
					djrq:undefined,
					sbzt:"3",
					tzsb:"1",
					haulmain : [],	
					whmain:[],				
					inspectionrecord : [],
					cycletypeOptions:[{"fullName":"日","id":"1"},{"fullName":"周","id":"2"},{"fullName":"月","id":"3"},{"fullName":"年","id":"4"}],
        },
        rules: {
						sbmc:[
						{
							required:true,
							message:'请输入设备名称',
							trigger:'blur'
						},
						],
						sbwh:[
						{
							required:true,
							message:'请输入设备位号',
							trigger:'blur'
						},
						],
						sblb:[
						{
							required:true,
							message:'请输入设备种类',
							trigger:'blur'
						},
						],
						sblx:[
						{
							required:true,
							message:'请输入设备类型',
							trigger:'blur'
						},
						],
						ssbm:[
						{
							required:true,
							message:'请输入所属部门',
							trigger:'blur'
						},
						],
						azwz:[
						{
							required:true,
							message:'请输入区域位置',
							trigger:'blur'
						},
						],
						gjxfl:[
						{
							required:true,
							message:'请输入关键性分类',
							trigger:'blur'
						},
						],
						scrq:[
						{
							required:true,
							message:'请输入生产日期',
							trigger:'blur'
						},
						],
						azrq:[
						{
							required:true,
							message:'请输入安装日期',
							trigger:'blur'
						},
						],
						tyrq:[
						{
							required:true,
							message:'请输入投用日期',
							trigger:'blur'
						},
						],
						synx:[
						{
							required:true,
							message:'请输入使用年限',
							trigger:'blur'
						},
						],
						gdzcbh:[
						{
							required:true,
							message:'请输入固定资产编号',
							trigger:'blur'
						},
						],
						sbzl:[
						{
							required:true,
							message:'请输入设备重量',
							trigger:'blur'
						},
						],
						sccj:[
						{
							required:true,
							message:'请输入生产厂家',
							trigger:'blur'
						},
						],
						andw:[
						{
							required:true,
							message:'请输入安装单位',
							trigger:'blur'
						},
						],
						ggxh:[
						{
							required:true,
							message:'请输入规格型号',
							trigger:'blur'
						},
						],
						ccxh:[
						{
							required:true,
							message:'请输入出厂序号',
							trigger:'blur'
						},
						],
						sbtx:[
						{
							required:true,
							message:'请输入设备特性',
							trigger:'blur'
						},
						],
						gd:[
						{
							required:true,
							message:'请输入工段',
							trigger:'blur'
						},
						],
						djr:[
						{
							required:true,
							message:'请输入登记人',
							trigger:'blur'
						},
						],
						djbm:[
						{
							required:true,
							message:'请输入登记部门',
							trigger:'blur'
						},
						],
						djrq:[
						{
							required:true,
							message:'请输入登记日期',
							trigger:'blur'
						},
						],
						sbzt:[
						{
							required:true,
							message:'请输入设备状态',
							trigger:'blur'
						},
						],
						tzsb:[
						{
							required:true,
							message:'请输入是否特种设备',
							trigger:'blur'
						},
						],
						

        },
				sblbOptions:[],
				sblxOptions:[],
				azwzOptions:[],
				sbztOptions:[{"fullName":"启用","id":"3"}],
				tzsbOptions:[{"fullName":"是","id":"0"},{"fullName":"否","id":"1"}],


      }
    },
	watch:{
		'dataForm.tzsb': {
			handler(newVal, oldVal) {
				if(newVal==0){
						this.isshow=true;
					}else{
						this.isshow=false;
					}
			},
			immediate: true,
			},

	},
    created() {
		this.getSblbOptions();
		this.getSblxOptions();
		this.getAzwzOptions();

    },
    methods: {
     show(){
		 if(this.data.tzsb==1){
             this.isshow=true;
		 }else{
			 this.isshow=false;
		 }
	 },
	 choice() {
		this.goodsBoxVisible = true
		this.$nextTick(() => {
			this.$refs.goodsBox.init()
		 })
		},

		 choice_w() {
		this.ssVisible = true
		this.$nextTick(() => {
			this.$refs.List.init()
		 })
		},

	 handleDel(index, row) {
      this.dataForm.haulmain.splice(index, 1);
    },
	
	handleDel_w(index, row) {
      this.dataForm.whmain.splice(index, 1);
    },

	 initList(list) {
	  this.dataForm.haulmain=[];
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
		let item;
		if(e.cycletype==1){
			 item = {
				id: e.id,
				type: e.name,
				flag: e.flag,
				times: e.times,
				cycletype: e.cycletype,
				measures: e.measures,
				haulmain_content: e.content,
				flag2:'检修',
				cycle:e.times+'/日',
			}

		}else if(e.cycletype==2){
			 item = {
				id: e.id,
				type: e.name,
				flag: e.flag,
				times: e.times,
				cycletype: e.cycletype,
				measures: e.measures,
				haulmain_content: e.content,
				flag2:'检修',
				cycle:e.times+'/周',
			}

		}else if(e.cycletype==3){
			 item = {
				id: e.id,
				type: e.name,
				flag: e.flag,
				times: e.times,
				cycletype: e.cycletype,
				measures: e.measures,
				haulmain_content: e.content,
				flag2:'检修',
				cycle:e.times+'/月',
			}

		}else if(e.cycletype==4){
			 item = {
				id: e.id,
				type: e.name,
				flag: e.flag,
				times: e.times,
				cycletype: e.cycletype,
				measures: e.measures,
				haulmain_content: e.content,
				flag2:'检修',
				cycle:e.times+'/年',
			}

		}
        
        this.dataForm.haulmain.push(item)
      }
    }, 	


	initList_w(list) {
	  this.dataForm.whmain=[];
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
		let item;
		if(e.cycletype==1){
			 item = {
				id: e.id,
				type: e.name,
				flag: e.flag,
				times: e.times,
				cycletype: e.cycletype,
				measures: e.measures,
				haulmain_content: e.content,
				flag2:'维护',
				cycle:e.times+'/日',
			}

		}else if(e.cycletype==2){
			 item = {
				id: e.id,
				type: e.name,
				flag: e.flag,
				times: e.times,
				cycletype: e.cycletype,
				measures: e.measures,
				haulmain_content: e.content,
				flag2:'维护',
				cycle:e.times+'/周',
			}

		}else if(e.cycletype==3){
			 item = {
				id: e.id,
				type: e.name,
				flag: e.flag,
				times: e.times,
				cycletype: e.cycletype,
				measures: e.measures,
				haulmain_content: e.content,
				flag2:'维护',
				cycle:e.times+'/月',
			}

		}else if(e.cycletype==4){
			 item = {
				id: e.id,
				type: e.name,
				flag: e.flag,
				times: e.times,
				cycletype: e.cycletype,
				measures: e.measures,
				haulmain_content: e.content,
				flag2:'维护',
				cycle:e.times+'/年',
			}

		}
        
        this.dataForm.whmain.push(item)
      }
    }, 

		getSblbOptions() {
			previewDataInterface("000691b2b6ff47e182460b08ef9f0027").then((res) => {
				this.sblbOptions = res.data;
			});
			},
		getSblxOptions() {
			previewDataInterface("ecbdc678f2ee4ec68052d31ff0cf5a69").then((res) => {
				this.sblxOptions = res.data;
			});
		},
		getAzwzOptions()
		{
			previewDataInterface('e7b2c31f5a7147c08629c5409dd7fdf4').then(res => {
				this.azwzOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {
				this.dataForm.haulmain =[];
				this.dataForm.inspectionrecord =[];

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
		  if(this.$refs['elForm'] != undefined){
              this.$refs['elForm'].resetFields();
		  }	
         
          if (this.dataForm.id) {
            request({
              url: '/api/system/QTSBSS/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{

             if(res.data.haulmain.length>0){
                  for(var g=0;g<res.data.haulmain.length;g++){
				       res.data.haulmain[g].flag2="检测";

			      }
			 }
			  
             if(res.data.whmain.length>0){

				 for(var g=0;g<res.data.whmain.length;g++){
				  res.data.whmain[g].flag2="维护";
			    }

			 }
			   

			   this.dataForm = res.data;

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {

            if (!this.dataForm.id) {
              request({
                url: '/api/system/QTSBSS',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/system/QTSBSS/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },
			addHandlehaulmainEntityList() {
				let item = {
					type: undefined,
					haulmain_content: undefined,
					cycle: undefined,
					measures: undefined,
					flag: undefined,
				}
				this.dataForm.haulmain.push(item)
			},
			handleDelhaulmainEntityList(index) {
				this.dataForm.haulmain.splice(index, 1);
			},
			addHandleinspectionrecordEntityList() {
				let item = {
					company: undefined,
					person: undefined,
					result: undefined,
					validity: undefined,
					reminder: undefined,
				}
				this.dataForm.inspectionrecord.push(item)
			},
			handleDelinspectionrecordEntityList(index) {
				this.dataForm.inspectionrecord.splice(index, 1);
			},

    }
  }
  </script>

  <style scoped>
       .my_title{
		   width: 100%;
		   height: 50px;
		   font-size: 16px;
           line-height: 50px;
           font-weight: 500;
		   color: #606266;
		   float: left;
	   }
  </style>